<template>
        <van-nav-bar
              title="日记"
              left-text="返回"
              @click-left="onClickLeft"
              :placeholder="true"
              :fixed="true"
        />

        <van-swipe :autoplay="500000" lazy-render v-if="(images.length!=0)">
          <van-swipe-item v-for="image in images" :key="image">
            <van-image
                fit="contain"
                position="center"
                :src="image"
            />
          </van-swipe-item>
          <template #indicator="{ active, total }">
            <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
          </template>
        </van-swipe>

        <div style="background-color:#fff;margin:2vw 0;" v-if="(diary!=null)">
            <div class="d-info">
                <span style="font-size: 5vw;font-weight: 600;">{{diary.username}}</span>
                <span style="font-size: 4vw;color: #777;">{{dateFilter(diary.startTime)}}</span>
            </div>
            <div class="d-content">
                <p>{{diary.diaryContent}}</p>
            </div>
        </div>

        <div style="background-color:#fff;margin:2vw 0;padding: 1vh;padding-left: 80vw;" v-if="(diary!=null&&nickflag==0)">
          <van-button color="#5dacdd" size="normal" 
           :disabled="(diary.shareState==1)" @click="onShare()">分&nbsp;&nbsp;&nbsp;享</van-button>
        </div>

        <div class="d-area" v-if="(diary!=null&&nickflag==0)">  
            <van-cell-group inset>
                <van-field
                  v-model="message"
                  rows="3"
                  autosize
                  type="textarea"
                  placeholder="留言"
                  show-word-limit
                />
            </van-cell-group>
            <van-button color="#f9cdd4" size="normal" @click="onSubmit">评&nbsp;&nbsp;&nbsp;论</van-button>
        </div>

        <div v-for="(item, index) in comments" :key="item.commentId"  class="detail-card" >
            <div class="d-info">
              <span style="font-size: 4vw;color: #777;">{{item.username}}</span>
              <span style="font-size: 4vw;font-weight: 600;">{{dateFilter(item.issueTime)}}</span>
            </div>
            <div class="d-content">
                <p class="d-p">&nbsp;&nbsp;&nbsp;&nbsp;{{item.commentContent}}</p>
            </div>
        </div>

        <div style="height: 3vh;">

        </div>


</template>
  
  <script>
  // @ is an alias to /src

import {getDate} from "../utils/time.js"
import axios from "axios"
import {store} from "../utils/store.js"
import { showToast,showSuccessToast, showFailToast, showConfirmDialog } from 'vant';

  
  export default {
    name: 'DetialView',
    data(){
        return {
            diaryId:0,
            nickflag:0,
            nickname:"",
            diary:null,
            time: Date.now(),
            content:"我特别想问:什么时候你能好好的爽快的答应一下我的行动呢？甚至不愿意问今天出来有什么事呢，会做些什么呢？连商量都不愿意商量的。一次次的否决真的很伤人心。感觉在这段关系中我没有什么话语权。这种情况下去的话，可以预见到我们的恋爱关系不会有任何实质上的提升，更糟糕的是表面的热度也会下降。即使单凭你一个人缓慢拉动，那也改变不了最终走向。你总是说你有计划，但一方面你没跟我畅所欲言的讲讲你的规划，另一方面这就是你的计划，我其实是作为木头人在其中出现，没有思想，也不能有思想。这样的关系我很害怕，它完全没有未来可言，虽然我一直说谈恋爱就是谈恋爱，不要提什么未来。更可悲是这段关系连现在也没有，它给我的只有这一阵子对下一阵子的期待，以及被你浇灭期待后的失落。",
            images:[],
            comments: [],
            message:""
        }
    },
    activated() {
        this.diary = null
        this.nickname="xxx"
        this.images = []
        this.diaryId = this.$route.query.diaryId
        this.nickflag = this.$route.query.anonymity  //是否显示匿名
        this.getDiary()
        this.getComments()
    },
    methods:{
      onSubmit(){
            if(this.message==""){
                showToast("请输入内容噢！")
                return
            }
            //axios请求进行提交，
            axios.get('/api/Diary/addComment', {
              params:{
                commentContent:this.message,
                userId: store.user.userId,
                diaryId: this.diaryId,
                issueTime: Date.now().toString()
              }
            }).then((res)=>{
                console.log(res.data)
                if(res.data.data==true){
                  this.message=""
                  this.getComments()
                }
            }).catch(function (error) {
                console.log(error);
            }) 
        },
        getDiary(){
          axios.get("/api/Diary/findDiaryById",{
              params:{
                diaryId: this.diaryId
              }
              }).then((res)=>{
                console.log(res.data.data)
                var data =res.data.data
                if(data.diaryId==0){return}
                if(data.userId == store.user.userId){
                    data.username = store.user.username
                  }else{data.username = store.lover.username}
                if(this.nickflag==1){data.username="匿名"}
                this.diary = data
                this.operateImg(data.diaryImg)
              }).catch((error)=>{
                console.log(error)
              })
        },
        getComments(){
            this.comments = []
            axios.get("/api/Diary/findComments",{
            params:{
              diaryId: this.diaryId,
            }
            }).then((res)=>{
              console.log(res.data.data)
              let user = store.user.userId
              res.data.data.forEach(element => {
                if(element.userId == user){
                  element.username = store.user.username
                }else{element.username = store.lover.username}
                if(this.nickflag==1){element.username="匿名"}
                this.comments.push(element)
              });
            }).catch((error)=>{
              console.log(error)
            })
        },
        operateImg(diaryImg){
          if(diaryImg==""){return}
          var imgs= diaryImg.split(";").slice(0,-1)
          imgs.forEach(ele => {
            this.images.push("http://localhost:8081/"+ele)
          });
          // this.images 
        },
        onShare(){
        axios.get('/api/Diary/shareDiary', {
              params:{diaryId: this.diary.diaryId}
            }).then((res)=>{
              console.log(res.data.data)
              if(res.data.data==true){
                  this.diary.shareState=1
                  showSuccessToast('分享成功！');
              }
            }).catch(function (error) {console.log(error);})
        //分享待办
        },
        onClickLeft(){
            history.back()
        },
        dateFilter(n){
            return getDate(n)
        },
    },
    

  }
  </script>

<style>

.d-info{
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 8vw;
    padding: 0 4vw;
    padding-top: 2vw;
    /* background-color: aquamarine; */
}

.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.1);
}

.d-content{
    font-size: 4vw;
    padding:0 4vw;
    line-height: 6vw;
    padding-bottom: 3vw;
    text-align: left;
}

.d-area{
  width:100vw;
  background-color: #fff;
  font-size: 4vw !important;
  display: flex;
  align-items: center;
  padding: 0 2vw;
  box-sizing: border-box;
  justify-content: space-between;
}
.d-area .van-cell-group--inset{
  flex: 1;
}

.detail-card{
  background-color: rgba(255, 255, 255, 0.8);
  padding: 2vw;
  text-align: left;
  border-top: 1px #5dacdd dotted;
}

.van-swipe{
  margin-top: 2vw;
  background-color: #fff;
  width: 100vw !important;
  height: 70vw !important;
}

.van-image{
    height: 100%;
    width: 90%;
}


</style>